<template>
  <view class="uni-goods-nav">
    <!-- 底部占位 -->
    <view class="uni-tab__seat" />
    <view class="uni-tab__cart-box flex">
      <view class="flex uni-tab__cart-sub-left">
        <view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart"
          @click="onClick(index,item)">
          <view class="uni-tab__icon">
            <uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
            <!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
          </view>
          <text class="uni-tab__text">{{ item.text }}</text>
          <view class="flex uni-tab__dot-box">
            <text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
						color:item.infoColor?item.infoColor:'#fff'
						}">{{ item.info }}</text>
          </view>
        </view>
      </view>
      <view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
        <view v-for="(item,index) in buttonGroup" :key="index"
          :style="{background:item.backgroundColor,color:item.color}" class="flex uni-tab__cart-button-right"
          @click="buttonClick(index,item)"><text :style="{color:item.color}"
            class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
        <view style="background: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);;" class="flex uni-tab__cart-button-right">
          <button :style="{color:item.color,padding:0,barder:0}" class="uni-tab__cart-button-right-text" open-type="share">好友分享</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    initVueI18n
  } from '@dcloudio/uni-i18n'
  import messages from './i18n/index.js'
  const {
    t
  } = initVueI18n(messages)
  /**
   * GoodsNav 商品导航
   * @description 商品加入购物车、立即购买等
   * @tutorial https://ext.dcloud.net.cn/plugin?id=865
   * @property {Array} options 组件参数
   * @property {Array} buttonGroup 组件按钮组参数
   * @property {Boolean} fill = [true | false] 组件按钮组参数
   * @property {Boolean} stat 是否开启统计功能
   * @event {Function} click 左侧点击事件
   * @event {Function} buttonClick 右侧按钮组点击事件
   * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
   */
  export default {
    name: 'UniGoodsNav',
    emits: ['click', 'buttonClick'],
    props: {
      options: {
        type: Array,
        default () {
          return [{
            icon: 'shop',
            text: t("uni-goods-nav.options.shop"),
          }, {
            icon: 'cart',
            text: t("uni-goods-nav.options.cart")
          }]
        }
      },
      buttonGroup: {
        type: Array,
        default () {
          return [{
              text: t("uni-goods-nav.buttonGroup.addToCart"),
              backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
              color: '#fff'
            },
            {
              text: t("uni-goods-nav.buttonGroup.buyNow"),
              backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
              color: '#fff'
            }
          ]
        }
      },
      fill: {
        type: Boolean,
        default: false
      },
      stat: {
        type: Boolean,
        default: false
      }
    },
    onShareAppMessage() {
      var e = this.thisqueryobj;
      return {
        title: "这张壁纸喜不喜欢？",
        imageUrl: e,
        path: "subpkg/goods-img/goods-img?src=" + encodeURIComponent(e)
      };
    }, //,
    methods: {
      onClick(index, item) {
        this.$emit('click', {
          index,
          content: item,
        })
      },
      buttonClick(index, item) {
        if (uni.report && this.stat) {
          uni.report(item.text, item.text)
        }
        this.$emit('buttonClick', {
          index,
          content: item
        })
      }
    }
  }
</script>

<style lang="scss">
  .flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .uni-goods-nav {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
  }

  .uni-tab__cart-box {
    flex: 1;
    height: 50px;
    background-color: #fff;
    z-index: 900;
  }

  .uni-tab__cart-sub-left {
    padding: 0 5px;
  }

  .uni-tab__cart-sub-right {
    flex: 1;
  }

  .uni-tab__right {
    margin: 5px 0;
    margin-right: 10px;
    border-radius: 100px;
    overflow: hidden;
  }

  .uni-tab__cart-button-left {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    // flex: 1;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 10px;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
  }

  .uni-tab__icon {
    width: 18px;
    height: 18px;
  }

  .image {
    width: 18px;
    height: 18px;
  }

  .uni-tab__text {
    margin-top: 3px;
    font-size: 12px;
    color: #646566;
  }

  .uni-tab__cart-button-right {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    flex: 1;
    justify-content: center;
    align-items: center;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
  }

  .uni-tab__cart-button-right-text {
    font-size: 14px;
    color: #fff;
  }

  .uni-tab__cart-button-right:active {
    opacity: 0.7;
  }

  .uni-tab__dot-box {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    position: absolute;
    right: -2px;
    top: 2px;
    justify-content: center;
    align-items: center;
    // width: 0;
    // height: 0;
  }

  .uni-tab__dot {
    // width: 30rpx;
    // height: 30rpx;
    padding: 0 4px;
    line-height: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    background-color: #ff0000;
    border-radius: 15px;
  }

  .uni-tab__dots {
    padding: 0 4px;
    // width: auto;
    border-radius: 15px;
  }
  button{
    background: transparent !important;
  }
</style>
